<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {background: #f2f2f2;}

        main{
            width: 990px;
            margin: 0 auto;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        .el-button {
            color: #666;
            font-size: 13px;
        }

        #d1 {
            width: 800px;
            float: left;
            overflow: hidden;
            height: 40px;
            margin: 0 15px auto;
        }

        #d1 ul li a:hover, #d2 a:hover {
            background-color: white;
            color: #D32031;
        }

        #d1 ul li a {
            color: white;
            display: block;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
        }

        #d2 {
            float: right;
        }

        input {
            height: 25px;
            width: 400px;
            margin-left: 18px;
        }

        ul {
            display: block;
        }

        ul li {
            margin: 0;
            list-style: none;
        }

        #d1 ul {
            overflow: hidden;
            float: left;
        }

        #d1 li {
            float: left;
        }

        #d2 li {
            float: left;
        }

        #d2 a {
            height: 30px;
            line-height: 30px;
            padding: 5px 15px !important;
            color: #fff;
            display: block;
            font-size: 12px;
            font-weight: normal;
        }

        #scbar {
            width: 990px;
            overflow: hidden;
            height: 42px;
            line-height: 42px;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #E9EFF5;
            background: #E8EFF5
        }

        .box-card img {
            width: 100%;
        }

        footer {
            margin-top: 15px;
        }

        #ft_top {
            height: 170px;
            width: 900px;
            margin: 0 auto
        }

        #ft_top div {
            padding-top: 30px;
            text-align: center;
            width: 300px;
            float: left;
        }

        #ft_top p {
            margin-bottom: 5px;
        }

        #ft_top h3 {
            margin-bottom: 10px;
        }

        #ft_bottom {
            background-color: #363636;
            height: 120px;
            width: 990px;
            margin: 0 auto;
            padding-top: 30px;
            text-align: center;
            font-size: 12px;
        }

        #ft_bottom p {
            margin-bottom: 5px;
        }

        #ft_bottom a, #ft_bottom p {
            color: #FFFFFF;
        }

        #pt {
            margin: 2px 0;
            height: 29px;
            border: none;
            background: transparent;
            line-height: 29px;
        }

        #pt .z a, #pt .z em, #pt .z span {
            float: left;
            height: 29px;
            font-size: 13px;
        }

        .nvhm {
            width: 16px;
            background: url(https://bbs.renrenche.com/static/image/common/search.png) no-repeat 0 0;
            line-height: 200px;
            overflow: hidden;
        }

        .z a{color: #333}

        .bm {
            border: 1px solid #CDCDCD;
            background: #FFF;
        }

        .bm div{
            height: 40px;
            line-height: 40px;
        }

        .fa_fav {
            background: no-repeat 0 50%;
            background-image: url(https://bbs.renrenche.com/static/image/common/fav.gif);
            padding-left: 20px;
            font-size: 13px;

        }

        .xi1{color: #F26C4F}

        .y {float: right}

        .xs2 {font-size: 14px !important}

        .ico_increase{
            background: url(https://bbs.renrenche.com/static/image/common/increase.png) no-repeat left center;
        }

        .essay{float: left;}
        
        #theme{width: 60%}

        #author{width: 20%}

        #views{width: 10%}

        #th{
            margin-top: 10px;
            background-color: #b2bec3;
            height: 30px;
            line-height: 30px;
        }

        em{
            width: 20px;
            background: url(https://bbs.renrenche.com/static/image/common/pt_item.png) no-repeat 3px 10px;
            line-height: 200px;
            overflow: hidden;
        }

        .content{
            height: 40px;
            line-height: 40px;
            background-color: white;
        }

        .content_blue{color: #007cd5}
        .content_black{color: #333333}

        #bg{
            background-color: #efefef;
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
<div id="app">
    <header>
        <div style="height:30px;line-height: 30px;background: #fff">
            <div style="width: 990px; margin: 0 auto">
                <a href="/index.html" style="font-size: 13px;margin-left: 20px">严选车官网</a>
                <el-button type="text" @click="open">收藏本站</el-button>
            </div>
        </div>
        <div style="height:40px;background-color: #e14800">
            <div style="width: 990px;margin: 0 auto">
                <div id="d1">
                    <ul>
                        <a href="/forumIndex.html" title="严选车社区" style="float:left; margin:-8px 15px 0 0;">
                            <img src="forumImg/logo.png" alt="严选车社区" border="0">
                        </a>
                        <li>
                            <a href="forumIndex.html">首页</a>
                        </li>
                        <li style="background-color: white">
                            <a href="community.html" style="color: red">社区</a>
                        </li>
                        <li>
                            <a href="">积分商城</a>
                        </li>
                        <li>
                            <a href="">车友会群</a>
                        </li>
                        <li>
                            <a href="">每日精选</a>
                        </li>
                        <li>
                            <a href="">问题反馈</a>
                        </li>
                    </ul>
                </div>
                <div id="d2">
                    <ul>
                        <li>
                            <a class="a1" style="font-size: 13px" href="/login.html">登录</a>
                        </li>
                        <li>
                            <a class="a1" style="font-size: 13px" href="/reg.html">注册</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="border-bottom: 0 solid #C2D5E3">
            <div style="width:990px;margin: 0 auto">
                <div id="scbar">
                    <input type="text" placeholder="请输入搜索内容" v-model="search">
                    <select id="mySelect" style="height: 30px">
                        <option value="1">文章</option>
                        <option value="2">帖子</option>
                        <option value="3">用户</option>
                    </select>
                    <el-button icon="el-icon-search" size="small" @click="search()"></el-button>
                    <b style="font-size: 15px"> 热搜: </b>
                    <a v-for="h in hotSearchArr" :href="h.url"
                       style="font-size: 13px;color: #369;margin-left: 10px">{{h.name}}</a>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div id="pt">
            <div class="z">
                <a href="forumIndex.html" class="nvhm" title="首页">人人车社区-专业二手车论坛</a>
                <em></em>
                <a href="">社区</a>
            </div>
        </div>
        <div class="bm">
            <div class="bm_h cl">
                <span class="y">
                    <a href="" class="fa_fav">
                        收藏本版
                        <span class="xi1">(268)</span>
                    </a>
                </span>
                <h1 class="xs2">
                    <a href="community.html">人人车友</a>
                    <span class="xs1 xw0 i">今日: <span class="xi1">1</span>
                        <b class="ico_increase">&nbsp;&nbsp;&nbsp;&nbsp;</b>
                        <span class="pipe">|</span>
                        主题: <span class="xi1">13252</span>
                        <span class="pipe">|</span>
                        排名: <span class="xi1" title="上次排名:1">1</span>
                        <b class="ico_increase">&nbsp;&nbsp;&nbsp;&nbsp;</b>
                        <a href="">每人心中都有一辆梦想车（人人车）</a>
                        <a href="">
                            <img src="https://bbs.renrenche.com/source/plugin/vanfon_geyan/images/heart2.png" style="width: 1.5%;">
                        </a>
                        <span>10761</span>
                    </span>
                </h1>
            </div>
        </div>
        <div id="bg">
            <div id="th">
                <div class="essay" id="theme">主题</div>
                <div class="essay" id="author">作者</div>
                <div class="essay" id="views">浏览量</div>
                <span>发表时间</span>
            </div>
            <hr>
            <div class="content">
                <div class="essay" style="width: 60%;">
                    <a href="">
                        <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                    </a>
                    <a href="" class="content_blue">[快报]</a>
                    <a href="" class="content_black">【人人车】社区播报4-15</a>
                    <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
                </div>
                <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
                <div class="essay" style="width: 10%;">
                    <span style="color: #336699">5129</span>
                </div>
                <div class="essay" style="width: 10%;font-size: 10px">
                    <span style="color: #333333">2023/4/15 9:12</span>
                </div>
            </div><hr>
            <div class="content">
                <div class="essay" style="width: 60%;">
                    <a href="">
                        <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                    </a>
                    <a href="" class="content_blue">[快报]</a>
                    <a href="" class="content_black">【人人车】社区播报4-15</a>
                    <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
                </div>
                <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
                <div class="essay" style="width: 10%;">
                    <span style="color: #336699">5129</span>
                </div>
                <div class="essay" style="width: 10%;font-size: 10px">
                    <span style="color: #333333">2023/4/15 9:12</span>
                </div>
            </div><hr>
            <div class="content">
            <div class="essay" style="width: 60%;">
                <a href="">
                    <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                </a>
                <a href="" class="content_blue">[快报]</a>
                <a href="" class="content_black">【人人车】社区播报4-15</a>
                <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
            </div>
            <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
            <div class="essay" style="width: 10%;">
                <span style="color: #336699">5129</span>
            </div>
            <div class="essay" style="width: 10%;font-size: 10px">
                <span style="color: #333333">2023/4/15 9:12</span>
            </div>
        </div><hr>
            <div class="content">
            <div class="essay" style="width: 60%;">
                <a href="">
                    <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                </a>
                <a href="" class="content_blue">[快报]</a>
                <a href="" class="content_black">【人人车】社区播报4-15</a>
                <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
            </div>
            <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
            <div class="essay" style="width: 10%;">
                <span style="color: #336699">5129</span>
            </div>
            <div class="essay" style="width: 10%;font-size: 10px">
                <span style="color: #333333">2023/4/15 9:12</span>
            </div>
        </div><hr>
            <div class="content">
            <div class="essay" style="width: 60%;">
                <a href="">
                    <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                </a>
                <a href="" class="content_blue">[快报]</a>
                <a href="" class="content_black">【人人车】社区播报4-15</a>
                <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
            </div>
            <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
            <div class="essay" style="width: 10%;">
                <span style="color: #336699">5129</span>
            </div>
            <div class="essay" style="width: 10%;font-size: 10px">
                <span style="color: #333333">2023/4/15 9:12</span>
            </div>
        </div><hr>
            <div class="content">
            <div class="essay" style="width: 60%;">
                <a href="">
                    <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                </a>
                <a href="" class="content_blue">[快报]</a>
                <a href="" class="content_black">【人人车】社区播报4-15</a>
                <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
            </div>
            <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
            <div class="essay" style="width: 10%;">
                <span style="color: #336699">5129</span>
            </div>
            <div class="essay" style="width: 10%;font-size: 10px">
                <span style="color: #333333">2023/4/15 9:12</span>
            </div>
        </div><hr>
            <div class="content">
                <div class="essay" style="width: 60%;">
                    <a href="">
                        <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                    </a>
                    <a href="" class="content_blue">[快报]</a>
                    <a href="" class="content_black">【人人车】社区播报4-15</a>
                    <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
                </div>
                <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
                <div class="essay" style="width: 10%;">
                    <span style="color: #336699">5129</span>
                </div>
                <div class="essay" style="width: 10%;font-size: 10px">
                    <span style="color: #333333">2023/4/15 9:12</span>
                </div>
            </div><hr>
            <div class="content">
                <div class="essay" style="width: 60%;">
                    <a href="">
                        <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                    </a>
                    <a href="" class="content_blue">[快报]</a>
                    <a href="" class="content_black">【人人车】社区播报4-15</a>
                    <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
                </div>
                <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
                <div class="essay" style="width: 10%;">
                    <span style="color: #336699">5129</span>
                </div>
                <div class="essay" style="width: 10%;font-size: 10px">
                    <span style="color: #333333">2023/4/15 9:12</span>
                </div>
            </div><hr>
            <div class="content">
                <div class="essay" style="width: 60%;">
                    <a href="">
                        <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                    </a>
                    <a href="" class="content_blue">[快报]</a>
                    <a href="" class="content_black">【人人车】社区播报4-15</a>
                    <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
                </div>
                <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
                <div class="essay" style="width: 10%;">
                    <span style="color: #336699">5129</span>
                </div>
                <div class="essay" style="width: 10%;font-size: 10px">
                    <span style="color: #333333">2023/4/15 9:12</span>
                </div>
            </div><hr>
            <div class="content">
                <div class="essay" style="width: 60%;">
                    <a href="">
                        <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                    </a>
                    <a href="" class="content_blue">[快报]</a>
                    <a href="" class="content_black">【人人车】社区播报4-15</a>
                    <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
                </div>
                <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
                <div class="essay" style="width: 10%;">
                    <span style="color: #336699">5129</span>
                </div>
                <div class="essay" style="width: 10%;font-size: 10px">
                    <span style="color: #333333">2023/4/15 9:12</span>
                </div>
            </div><hr>
            <div class="content">
                <div class="essay" style="width: 60%;">
                    <a href="">
                        <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="">
                    </a>
                    <a href="" class="content_blue">[快报]</a>
                    <a href="" class="content_black">【人人车】社区播报4-15</a>
                    <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif">
                </div>
                <a href=""  class="essay" style="width: 20%;color: #333333;">小喇叭</a>
                <div class="essay" style="width: 10%;">
                    <span style="color: #336699">5129</span>
                </div>
                <div class="essay" style="width: 10%;font-size: 10px">
                    <span style="color: #333333">2023/4/15 9:12</span>
                </div>
            </div><hr>
        </div>
        <a href="">
            <img src="https://bbs.renrenche.com/static/image/common/pn_post.png" alt="">
        </a>
    </main>
    <footer>
        <div style="background: #DCDADB">
            <div id="ft_top">
                <div>
                    <h3>关于我们</h3>
                    <p>
                        <el-link href="/index.html" icon="el-icon-link">网站首页</el-link>
                        <el-link href="/introduction.html" icon="el-icon-link">关于我们</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">加入我们</el-link>
                        <el-link href="" icon="el-icon-link">联系我们</el-link>
                    </p>
                </div>
                <div>
                    <h3>联系我们</h3>
                    <p>
                        <el-link href="" icon="el-icon-link">网站:http://localhost:8080/index.html</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">微博:</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">客服电话:</el-link>
                    </p>
                </div>
                <div>
                    <h3>关注我们</h3>
                </div>
            </div>
        </div>
        <div style="background-color: #363636">
            <div id="ft_bottom">
                <p>
                    <a href="">手机版</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">个人收藏</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">小黑屋</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">严选车-放心二手车-爱车人懂车人聚集地</a>
                </p>
                <p>京ICP备 14030440号</p>
                <p>地址：北京市朝阳区北苑东路中国铁建广场B座19-21层 电话: 400-670-1080</p>
            </div>
        </div>
    </footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                search: "", //输入框内容
                hotSearchArr: [{name: '严选车社区', url: 'forumIndex.html'}, {name: '严选车', url: 'index.html'},
                    {name: '二手车', url: ''}, {name: '车友会', url: ''}], //热搜
            }
        },
        methods: {
            open() {
                this.$alert('请按 Ctrl+D 键添加到收藏夹', '提示信息', {
                    confirmButtonText: '确定'
                })
            },
            search() {
                // location.href = "/forumResult.html?search="+v.search;
            }
        },
        created: function () {
            // axios.get("/selectFromArt").then(function (response) {
            //     v.articleArr = response.data;
            // })
            // let selected = document.getElementById("mySelect").value;
            // if (selected == 1) {
            //     axios.get("/selectFromArt").then(function (response) {
            //         v.articleArr = response.data;
            //     })
            // }else if(selected == 2) {
            //     axios.get("/selectFromPost").then(function (response) {
            //         v.articleArr = response.data;
            //     })
            // }else {
            //     axios.get("/selectFromUser").then(function (response) {
            //         v.articleArr = response.data;
            //     })
            // }
        }
    })
</script>
</html>